<template>
  <E-box-containers title="最新音乐" :loading="load">
    <router-link class="box-right" slot="box-right" :to="{name:'new-music'}">
      更多
      <i class="el-icon-arrow-right" />
    </router-link>
    <div class="E-reco-new-music">
      <el-row v-if="dataArr.length" :gutter="0">
        <el-col :span="12" v-for="(item, index) in dataArr.slice(0,10)" :key="index">
          <div class="box-item" :class="{active:active===index}" @click="active=index">
            <div class="box-index flex-center">
              <i v-if="active===index" class="fa fa-volume-up" />
              <span v-else>{{index|toStr}}</span>
            </div>
            <div
              :class="{active:active===index}"
              class="box-image bg-image-cover flex-center"
              v-lazy:background-image="`${item.picUrl}?param=100y100`"
            >
              <i v-if="active===index" class="fa fa-pause-circle-o" />
              <i v-else class="fa fa-play-circle-o" />
            </div>
            <div class="box-content">
              <p class="title text-ellipsis">{{item.name}}</p>
              <p class="content text-ellipsis">
                <i v-if="item.song.mvid" class="fa fa-youtube-play" />
                <template v-for="(it, i) in item.song.artists">
                  <span class="btn-span" :key="i">{{it.name}}</span>
                  <i class="cutting-line" v-if="item.song.artists.length!==i+1" :key="`-${i}`" />
                </template>
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </E-box-containers>
</template>

<script>
export default {
  components: {
    EBoxContainers: () => import('./E-box-containers')
  },
  mounted() {
    this.getData();
  },
  data() {
    return {
      load: true,
      dataArr: [],
      active: -1
    };
  },
  methods: {
    getData() {
      this.$api.get('reco_newMusic').then(({ result = [] }) => {
        this.dataArr = result;
      }).finally(() => { this.load = false; });
    }
  },
  filters: {
    toStr(val) {
      return (`0${val + 1}`).slice(-2);
    }
  }
};
</script>

<style lang="scss" scoped>
.E-reco-new-music {
  @import "@/plug-in/_base.scss";
  .el-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 331px;
    $border: 0.5px solid rgb(232, 232, 234);
    border-left: $border;
    border-top: $border;
    & > .el-col {
      & > .box-item {
        background-color: #fff;
        border-right: $border;
        border-bottom: $border;
      }
      &:nth-child(2),
      &:nth-child(4),
      &:nth-child(7),
      &:nth-child(9) {
        & > .box-item {
          background-color: rgb(245, 245, 247);
        }
      }
      & > .box-item {
        padding: 10px 0;
        cursor: default;
        display: flex;
        $size: 45px;
        // 字体颜色有三个级别
        $color: #555;
        $color-hover: #333;
        $color-active: #000;
        color: $color;
        &:hover {
          background-color: rgb(235, 236, 237);
          color: $color-hover;
        }
        &.active {
          background-color: rgb(227, 227, 229);
          color: $color-active;
          & > .box-content {
            & > p.title {
              color: $color-active;
            }
          }
        }
        & > .box-index {
          width: $size;
          height: $size;
          line-height: $size;
          flex: 0 0 $size;
          text-align: center;
          & > i {
            color: rgb(198, 47, 47);
          }
        }
        & > .box-image {
          width: $size;
          height: $size;
          flex: 0 0 $size;
          cursor: pointer;
          & > i {
            font-size: $size * 0.6;
            color: rgba(0, 0, 0, 0.5);
            transition: color 0.3s;
            &:hover {
              color: #fff;
            }
          }
          &.active {
            & > i {
              color: #fff;
            }
          }
        }
        & > .box-content {
          flex-grow: 1;
          height: $size;
          padding-left: 10px;
          padding-right: 20px;
          overflow: hidden;
          & > p {
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            &.title {
              height: 25px;
              line-height: 25px;
              font-size: 15px;
              color: $color-hover;
            }
            & > .fa {
              cursor: pointer;
              margin-right: 5px;
              &.fa-youtube-play {
                color: rgb(198, 47, 47);
              }
            }
            & > .cutting-line {
              &::before {
                content: "/";
                margin: 0 3px;
                color: $color;
              }
            }
            & > .btn-span {
              cursor: pointer;
              &:hover {
                color: $color-active;
              }
            }
          }
        }
      }
    }
  }
}
</style>
